<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>实习意向调查表</title>
  <link rel="stylesheet" href="css/my.css"> <!-- 公共样式 -->
  <link rel="stylesheet" href="css/question.css"> <!-- 私有样式 -->
  <link rel="stylesheet" href="css/vant.css">
  <script type="text/javascript" src="js/jweixin-1.3.2.js"></script> <!-- 微信sdk -->
  <script type="text/javascript" src="js/rem.js"></script> <!-- 适配js -->
  <script type="text/javascript" src="js/vue.js"></script> <!-- vue.js -->
  <script type="text/javascript" src="js/axios.min.js"></script> <!-- axios.js -->
  <script src="js/vant.min.js"></script>

</head>

<body>
  <div id="app" class="app">
    <img :src="startUrl+'/question2.png'" alt="" class="img1" @click="toIndex">
    <!-- <img :src="startUrl+'/question3.png'" alt="" class="img2"> -->
    <div style="text-align:center;font-size:0.45rem;margin-top:0.2rem">广州应用科技学院</div>
    <div class="message">
      <p class="title">个人信息</p>
      <div class="formBox">
        <van-field v-model="otherData.userName" label="姓名" label-width="1.5rem" maxlength="15" placeholder="必填">
        </van-field>
        <van-field @click="openShow('1')" v-model="otherData.sex" center readonly clickable is-link label="性别"
          label-width="1.5rem" placeholder="请选择"></van-field>
        <van-field @click="openShow('2')" v-model="otherData.school" center readonly clickable is-link label="学院"
          label-width="1.5rem" placeholder="请选择"></van-field>
        <van-field @click="openShow('3')" v-model="otherData.major" center readonly clickable is-link label="专业"
          label-width="1.5rem" placeholder="请选择"></van-field>
      </div>

    </div>
    <div class="questionBox">
      <p class="title">开始答题</p>
      <div class="formBox">
        <div class="formItem" v-for="(item,index) in list" :key="item.id">
          <div class="titles">{{index+1}}、{{item.stem}}</div>
          <van-radio-group v-model="item.answer" checked-color="#12B0DB" icon-size="0.36rem"
            @change="setRadio(item,index,$event)" v-if="item.type==1">
            <van-radio :name="itemChildren.label" v-for="(itemChildren,indexChildren) in item.options">
              {{itemChildren.label}}、{{itemChildren.value}}
            </van-radio>
          </van-radio-group>
          <van-checkbox-group v-model="item.answer" checked-color="#12B0DB" icon-size="0.36rem"
            @change="setCheckBox(item,index,$event)" v-if="item.type==2">
            <van-checkbox shape="square" :name="itemChildren.label"
              v-for="(itemChildren,indexChildren) in item.options">{{itemChildren.label}}、{{itemChildren.value}}
            </van-checkbox>
          </van-checkbox-group>
        </div>
      </div>
    </div>
    <div class="btn" @click="submit">提交</div>
    <!-- select弹窗 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
    <!-- 登录弹窗 -->
    <van-popup v-model="loginShow" round :close-on-click-overlay="false">
      <div class="loginBox">
        <van-field v-model="loginObj.mobile" type="tel" label="手机号" maxlength='11' label-width="1.5rem"
          placeholder="手机号">
        </van-field>
        <van-field v-model="loginObj.captchaCode" label="验证码" label-width="1.5rem" maxlength="4" placeholder="验证码">
          <template #button>
            <img :src="codeImgUrl" alt class="qrcodeImg" @click="getCodeImg" />
          </template>
        </van-field>
        <van-field v-model="loginObj.mailCode" type="number" label="短信验证码" label-width="1.5rem" maxlength="4"
          placeholder="短信验证码">
          <template #button>
            <van-button size="small" class="codeStyle" v-if="qrcodeTitle=='获取验证码'" @click="getCode">{{qrcodeTitle}}
            </van-button>
            <van-button size="small" class="codeStyle" v-else>{{qrcodeTitle}}</van-button>
          </template>
        </van-field>
        <div class="btn" @click="loginBtn">登录</div>
        <div class="xy">
          <van-checkbox style="margin-bottom:0 !important" shape="square" name="1" v-model="check"
            checked-color="#12B0DB" icon-size="0.25rem"></van-checkbox>
          <div class="mes">
            同意
            <span class="mainColor" @click="toWebUrl('1')">《用户协议》</span>
            <span class="mainColor" @click="toWebUrl('2')">《隐私政策》</span>
            <span class="mainColor" @click="toWebUrl('3')">《灵活就业服务协议》</span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
  <script>
    var vm = new Vue({
      el: "#app", //挂载点
      data: {
        userDetail:{},
        getToken:"",
        // 登录区域--开始
        loginObj: {
          mobile: "", // 手机号
          captchaCode: "", // 验证码
          mailCode: "", // 短信验证码
        },
        qrcodeTitle: "获取验证码", // 发送验证码文案
        codeImgUrl: "", // 图片
        check: "",
        sidNumber: "",
        loginShow: true, // 登录弹窗
        // 登录区域--结束
        
        answerId:0,
        showPicker: false,
        showPickerType: "",
        // config: "https://testwww.gogowork.cn/gogojob-ucenter",
        config:"/gogojob-ucenter",
        startUrl: "https://job-img.gogowork.cn/static/img",
        otherData: {
          userName: "", // 姓名
          sex: "", // 性别
          school: "", // 学院
          major: "" // 专业
        },
        columns: [],
        list: [], //试题
        surveyQuestionAnswerLogBatchParamList: [], //答题数组
      },
      methods: {
        // 前往小程序
        toIndex() {
          var isMiniProgram = window.navigator.userAgent.toLocaleLowerCase().indexOf('miniprogram') > -1;
          if (isMiniProgram) {
            wx.miniProgram.redirectTo({
              url: '/pages/tabBar/index/index?userDetail='+JSON.stringify(this.userDetail)
            })
          } else {
            window.location.href = 'https://www.gogowork.cn/h5/index.html?regInviteId=' + (window.sessionStorage
              .getItem("uid") || 0)+"&path=/pages/tabBar/index/index"

          }
        },
        // 打开弹窗
        openShow(type) {
          this.showPickerType = type;
          if (type == 1) {
            this.columns = ['男', '女']
          } else if (type == 2) {
            this.columns = ['计算机学院']
          } else if (type == 3) {
            this.columns = ['电子商务', '市场营销', '数字媒体技术', '大数据与会计', '智慧旅游技术应用']
          }
          this.showPicker = true;
        },
        // 关闭弹窗
        onCancel() {
          this.showPicker = false;
          this.columns = [];
          this.showPickerType = "";
        },
        // 确认弹窗
        onConfirm(e) {
          if (this.showPickerType == 1) {
            this.otherData.sex = e;
          } else if (this.showPickerType == 2) {
            this.otherData.school = e;
          } else if (this.showPickerType == 3) {
            this.otherData.major = e;
          }
          this.onCancel()
        },
        // 获取数据
        getList() {
          axios({
            url: this.config + "/survey/question/page",
            method: "get",
            headers: {
              'token':this.getToken
            },
            params: {
              pageNum: 1,
              pageSize:30,
              surveyId: 3
            }
          }).then(res => {
            if (res.data.code == 200) {
              if (res.data.data == 401) {
                this.loginObj = {
                  mobile: "", // 手机号
                  captchaCode: "", // 验证码
                  mailCode: "", // 短信验证码
                }
                this.qrcodeTitle = "获取验证码", // 发送验证码文案
                  this.codeImgUrl = "", // 图片
                  this.check = "",
                  this.loginShow = true;
                this.getCodeImg()
              } else if (res.data.data == 201) {
                window.location.href = "./isOk.html"
              } else {
                this.answerId = res.data.data.answerId;
                res.data.data.resultList.records.forEach(item => {
                  if (item.type == 1) {
                    item.answer = "";
                  } else if (item.type == 2) {
                    item.answer = [];
                  }
                  item.options = JSON.parse(item.options)
                })
                this.list = res.data.data.resultList.records;
              }
            } else {
              this.$toast(res.data.msg);
            }
          }).catch(err => {
            this.$toast('获取试题失败');
          })
        },

        // 获取参数
        getParameterByName(name, url) {
          if (!url) url = window.location.href;
          name = name.replace(/[\[\]]/g, "\\$&");
          var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
          if (!results) return null;
          if (!results[2]) return "";
          return decodeURIComponent(results[2].replace(/\+/g, " "));
        },
        // 设置复选框
        setCheckBox(item, index, e) {
          var obj = {
            questionId: item.id,
            answer: item.answer.length > 0 ? item.answer.join(",") : "",
            index: index
          }
          let indexs = this.surveyQuestionAnswerLogBatchParamList.findIndex(item1 => item1.questionId == obj
            .questionId)
          if (indexs > -1) {
            this.surveyQuestionAnswerLogBatchParamList.splice(indexs, 1, obj)
          } else {
            this.surveyQuestionAnswerLogBatchParamList.push(obj)
          }
        },
        // 设置单选框
        setRadio(item, index, e) {
          var obj = {
            questionId: item.id,
            answer: item.answer,
            index: index
          }
          let indexs = this.surveyQuestionAnswerLogBatchParamList.findIndex(item1 => item1.questionId == obj
            .questionId)
          if (indexs > -1) {
            this.surveyQuestionAnswerLogBatchParamList.splice(indexs, 1, obj)
          } else {
            this.surveyQuestionAnswerLogBatchParamList.push(obj)
          }
        },
        // 提交
        submit() {
          var arr = []
          this.surveyQuestionAnswerLogBatchParamList.forEach(item => {
            if (item.answer) {
              arr.push(item)
            }
          })

          if (this.otherData.userName == '') {
            this.$toast('请输入姓名')
          } else if (this.otherData.sex == '') {
            this.$toast('请选择性别')
          } else if (this.otherData.school == '') {
            this.$toast('请选择学院')
          } else if (this.otherData.major == '') {
            this.$toast('请选择专业')
          } else if (arr.length < this.list.length) {
            this.$toast('还有未作答的题目')
          } else {
            axios({
              url: this.config + "/survey/questionanswerlog/addBatch",
              method: "post",
              headers: {
                'token':this.getToken
              },
              data: {
                otherData: JSON.stringify(this.otherData),
                surveyId: 3,
                answerId:this.answerId,
                surveyQuestionAnswerLogBatchParamList: this.surveyQuestionAnswerLogBatchParamList
              }
            }).then(res => {
              if (res.data.code == 200) {
                window.location.href = "./isOk.html"
              } else {
                this.$toast(res.data.msg);
              }
            }).catch(err => {
              this.$toast('提交失败');
            })
          }
        },

        // 登录操作--开始
        // 获取随机32位
        generateRandomString() {
          const characters =
            "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
          let randomString = "";
          for (let i = 0; i < 32; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            randomString += characters.charAt(randomIndex);
          }
          return randomString;
        },
        // 获取图片验证码
        getCodeImg() {
          var numbers = this.generateRandomString();
          this.sidNumber = numbers;
          this.codeImgUrl = this.config + "/passport/captcha?sid=" + numbers;
        },
        // 跳转外链
        toWebUrl(type) {
          switch (type) {
            case "1":
              window.open("https://www.gogowork.cn/cms/article/111");
              break;
            case "2":
              window.open("https://www.gogowork.cn/cms/article/2023080741939871");
              break;
            case "3":
              window.open("https://www.gogowork.cn/cms/article/2023080804851936");
              break;
          }
        },
        // 获取短信验证码
        getCode() {
          var reg = /^1[3456789]\d{9}$/;
          if (reg.test(this.loginObj.mobile) == false) {
            this.$toast("手机号格式错误");
          } else if (this.loginObj.captchaCode == "") {
            this.$toast("图片验证码错误");
          } else {
            axios({
              url: this.config + "/passport/sendcode",
              method: "post",
              data: {
                mobile: this.loginObj.mobile,
                captchaCode: this.loginObj.captchaCode,
                sid: this.sidNumber,
                loginFrom: "4"
              }
            }).then(res => {
              if (res.data.code == 200) {
                this.qrcodeTitle = "请60S后重试";
                var t = 60;
                this.timer = setInterval(() => {
                  t--;
                  this.qrcodeTitle = "请" + t + "S后重试";
                  if (t <= 0) {
                    clearInterval(this.timer);
                    this.qrcodeTitle = "获取验证码";
                  }
                }, 1000);
              } else {
                this.$toast(res.data.msg);
                clearInterval(this.timer);
                this.qrcodeTitle = "获取验证码";
              }
            }).catch(err => {
              this.$toast('发送失败');
            })
          }
        },
        // 登录
        loginBtn() {
          var reg = /^1[3456789]\d{9}$/;
          if (reg.test(this.loginObj.mobile) == false) {
            this.$toast("请输入正确的手机号");
          } else if (this.loginObj.captchaCode == "") {
            this.$toast("请输入图片验证码");
          } else if (this.loginObj.mailCode == "") {
            this.$toast("请输入短信验证码");
          } else if (!this.check) {
            this.$toast("请同意协议");
          } else {
            axios({
              url: this.config + "/passport/login",
              method: "post",
              data: {
                mobile: this.loginObj.mobile,
                openId: "",
                unionId: "",
                code: this.loginObj.mailCode,
                loginFrom: "4",
                identity: 1,
                regInviteId:this.getParameterByName("regInviteId")||0,
                regFrom:this.getParameterByName("regFrom")||0,
                regInviteGroup:this.getParameterByName("regInviteGroup")||0
              }
            }).then(res => {
              console.log(res,'res--------------login');
              
              if (res.data.code == 200) {
                this.$toast('登录成功');
                this.getToken = res.data.data.token;
                this.userDetail = res.data.data
                sessionStorage.setItem("userDetail",JSON.stringify(res.data.data))
                sessionStorage.setItem("token", res.data.data.token)
                sessionStorage.setItem("uid", res.data.data.id)
                this.loginShow = false;
                setTimeout(()=>{
                  this.getList()
                },800)
              } else {
                this.$toast(res.data.msg);
              }
            }).catch(err => {
              this.$toast('登录失败');
            })
          }
        },
        // 登录操作--结束


      },
      watch: { //监听

      },
      computed: { //计算属性

      },
      filters: {

      },
      created() {
        if(this.getParameterByName("token")){
          this.getToken = this.getParameterByName("token")
        }else{
          this.getToken = ""
        }
      },
      mounted() {
        // 获取图片验证码
        var numbers = this.generateRandomString();
        this.sidNumber = numbers;
        this.codeImgUrl = this.config + "/passport/captcha?sid=" + numbers;
        this.getList()
      }
    })
  </script>
</body>

</html>